<template>
  <div class="person">
    <h3>姓名:{{ person.name }}</h3>
    <h3>年龄:{{ person.age }}</h3>
    <h3>汽车:{{ person.car.c1 }},{{ person.car.c2 }}</h3>
    <br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar1">修改汽车1</button>
    <button @click="changeCar2">修改汽车2</button>
    <button @click="changeCar">修改所有汽车</button>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {reactive,watch} from 'vue';
    //数据
    let person=reactive({
      name:"沐七",
      age:18,
      car:{
        c1:"aodi",
        c2:"benchi"
      }
    })

    //方法
    function changeName(){
      person.name+="~"
    }
    function changeAge(){
      person.age++
    }
    function changeCar1(){
      person.car.c1="bmw"
    }
    function changeCar2(){
      person.car.c2="byd"
    }
    function changeCar(){
      person.car={c1:"爱玛",c2:"雅迪"}
    }

    //监视
    //监视上述多个数据
    //参数1写成数组格式，里面为函数，返回要监视的属性
    //newValue和oldValue，分别是变化前后的[名字，汽车]，数组形式
    //如果名字变了汽车没变，那就是[新名字，汽车]，[原名字，汽车]
    watch([()=>{return person.name},()=>{return person.car}],(newValue,oldValue)=>{
      console.log("person变化了",newValue,oldValue);
    },{deep:true})


</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>